<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>天空电影</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css?v=1024">
    <link rel="stylesheet" href="__STATIC__/css/admin_style.css?v=1024">
    <script type="text/javascript" src="__STATIC__/js/jquery.js?v=1024"></script>
    <script type="text/javascript" src="__STATIC__/layui/layui.js?v=1024"></script>
    <script>
        
    </script>
    <style type="text/css">
        .layui-form {
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;    
            flex-wrap: wrap;
        }
        .layui-form-item {
            width: 100%;
        }
        .sousuo {
            display: flex;
            padding: 0;
            margin: 0;
        }
        .sousuoinput {
            width: calc(100% - 10px - 80px);
            margin-right: 10px;
        }
        .sousuobtn {
            width: 80px;
        }
        .listpic {
            width: 60px;
            border-radius: 5px;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" id="app" v-cloak>
  <div class="layui-form-item">
    <div class="layui-input-block sousuo">
      <input type="text" name="keyword" v-model="keyword" lay-verify="title" autocomplete="off" placeholder="请输入影片名称" value="{$keyword}" class="layui-input sousuoinput ">
        <button type="button" class="layui-btn sousuobtn" lay-submit="" @click="searchfun">搜索</button>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block sousuo">
      <input type="text" name="tiantang_id" v-model="tiantang_id" lay-verify="tiantang_id" autocomplete="off" placeholder="请输入影片ID" value="{$tiantang_id}" class="layui-input sousuoinput ">

        <a class="j-iframe layui-btn layui-btn-primary" :data-href="'/app.php/tiankong/info?tiantang_id=' + tiantang_id + '&vod_id=' + vod_id + '&vod_name=' + vod_name + '&tiantang_name=' + vod_name" data-height="90%" data-width="98%" :data-title="vod_name" href="javascript:;" title="编辑">绑定ID</a>
    </div>
  </div>
  
  <div class="layui-form-item">
      <table class="layui-table" lay-size="sm">
        <thead>
        <tr>
            <th width="10">ID</th>
            <th width="60">图片</th>
            <th width="">名称</th>
            <th width="50">操作</th>
        </tr>
        </thead>
    
        <tr v-for="vo in list">
            <td>{{vo.id}}</td>
            <td><img class="listpic lazy" v-lazy="'http://pic.xuebangbio.com'+vo.sLogo" src="" alt="" /></td>
            <td><h3><b>{{vo.name}}</b></h3><font style="    font-size: 0.5rem;
    color: rgb(153, 153, 153);
    max-height: 38px;
    overflow: auto;
    display: block;
    border-radius: 5px;
    box-shadow: inset 0 0 8px -5px #000;
    padding: 5px;">{{vo.actor}}</font></td>
            <td>
                <a class="j-iframe layui-btn layui-btn-primary" :data-href="'/app.php/tiankong/info?tiantang_id=' + vo.id + '&vod_id=' + vod_id + '&tiantang_name=' + vo.name + '&vod_name=' + vod_name" data-height="90%" data-width="98%" :data-title="vo.name" href="javascript:;" title="编辑">选择</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div style="font-size:12px; color:#999;text-align: center;" v-if="list.length == 0">
        暂无数据
    </div>
    <div style="font-size:12px; color:#999;text-align: center;" v-if="list.length > 0">
        
        <a class="layui-btn" @click="showmore();" href="javascript:;" title="查看更多">查看更多</a>
    </div>
  </div>
</form>
{include file="../../../application/admin/view/public/foot" /}
<script src="https://www.jq22.com/demo/tuupola-jquery_lazyload/jquery.lazyload.js?v=1.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/static/js/vue-lazyload.js"></script>
<script>
    var app;
      var form, layer;
      layui.use(['form', 'layedit', 'laydate'], function(){
          form = layui.form
          ,layer = layui.layer;
        Vue.use(VueLazyload, {
          preLoad: 1,
          error: '../image/defaultbg.jpg',
          loading: '../image/defaultbg.jpg',
          attempt: 0
        })
        app = new Vue({
            el: '#app',
            data: {
                list: [],
                keyword: '{$keyword}',
                vod_id: '{$vod_id}',
                vod_name: '<?php echo $vod_name;?>',
                page: 1,
                tiantang_id: "",
            },
            created: function () {
                var that = this;
            },
            methods: {
                showmore: function() {
                    var that = this;
                    that.page++;
                    that.getlist();
                },
                getlist: function() {
                    var that = this;
                    var indexload = layer.load();
                    $.get('https://ss.lcjlnjyy.com:11011/system/api/video/search?channel=meijupingios&idfa=00000000-0000-0000-0000-000000000000&ifrom=ios&keyword='+that.keyword+'&packageName=com.meijuniao.app&pageNum='+that.page+'&pageSize=10&version=2.2.3'


                        ,function(res) {
                        // console.log(res)
                        layer.close(indexload);
                        if(res.data.length > 0) {
                            if(that.page == 1) {
                                that.list = res.data;
                            } else {
                                for(var i in res.data) {
                                    that.list.push(res.data[i]);
                                }
                            }
                        } else {
                            if(that.page == 1) {
                                that.list = [];
                            } else {
                                layer.msg('没有更多数据了');
                            }
                        }
                    }, "json");
                },
                searchfun: function() {
                    var that = this;
                    that.page = 1;
                    that.getlist();
                },
                loadingdata: function() {
                    var that = this;
                }
            },
            mounted: function () {
                var that = this;
                //调用数据
                that.getlist();
            }
        })
    });
</script>
</body>
</html>